<template>
  <h1>部门信息</h1>
  <el-table :data="tableData.data" style="width: 100%;margin: 0 auto">

    <el-table-column label="序号" type="index" width="80" align="center">
    </el-table-column>

    <el-table-column label="部门名称" prop="departmentName" width="100" align="center">
    </el-table-column>


    <el-table-column label="部门领导" prop="departmentLeaderName" width="100" align="center">
    </el-table-column>


    <el-table-column label="部门人数" prop="departmentNums" width="160" align="center">
    </el-table-column>


    <el-table-column label="成立日期" width="180px">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon>
            <timer />
          </el-icon>
          <span style="margin-left: 10px">{{ scope.row.createTIme.slice(0, 10) }}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="操作" width="200px" align="center">
      <template #default="scope">
        <el-button
          size="small"
          @click="handleEdit(scope.row)"
          style="width: 60px;"
        >修改
        </el-button>

        <el-button
          size="small"
          style="width: 60px;"
          type="danger"
          v-model:current-page="query.departmentData.pages"
          v-model:age-sizes="query.departmentData.size"
          @click="handleDelete(scope.$index, scope.row)"
        >删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页组件-->
  <div>
    <el-pagination
      small
      layout="total, prev, pager, next, jumper"
      :total="tableData.total"
      class="pagiantion "
      @current-change="pageChange"
      v-model:current-page="query.departmentData.pages"
      v-model:page-size="query.departmentData.size"
    />
  </div>
</template>

<script lang="ts" setup>
import { Timer } from "@element-plus/icons-vue";
import { onMounted, reactive } from "vue";
import { getDepartments, deleteDepartments } from "@/utils/api";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";

const store = useStore();
const router = useRouter();


//展示数据
const tableData = reactive({
  data: [],
  total: 10,
  current: 1, //当前页数
  size: 10  //每页显示几条数据
});

//请求参数
const query = reactive({
  departmentData: {
    "createTIme": "",
    "departmentID": 0,
    "departmentLeaderId": 0,
    "departmentName": "",
    "pages": tableData.current,
    "size": tableData.size,
    "updateTime": ""
  }
});

//组件加载时触发
onMounted(() => {
  getDepartmentss(query.departmentData);
});

//分页的页码变化时触发
const pageChange = () => {
  getDepartmentss(query.departmentData);
};

//发送请求获取结果
const getDepartmentss = async (requestData) => {
  let res = await getDepartments(requestData);
  const { data, total, current } = res;
  tableData.data = data;
  tableData.total = total;
  tableData.current = current;
};

// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm(
    "确定要删除吗?",
    "警告",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }
  )
    .then(async () => {
      let res = await deleteDepartments(row.employeeId);
      if (res.data) {
        ElMessage({
          type: "success",
          message: "删除成功"
        });
      } else {
        ElMessage({
          type: "error",
          message: "删除成功"
        });
      }
      getDepartmentss(query.departmentData);


    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    });
};

//修改数据
const handleEdit = (row) => {
  router.push({
    path:'/home/updatedeps',
    query:{id:row.departmentId}
  })
};
</script>


<style scoped>

</style>